<template>
  <div class="wrapper">
    <!-- <el-card class="box-card" style="width:200px;margin-right:20px">
      <div slot="header" class="clearfix"><span>组合动作</span>
        <el-button @click="handleExport" style="float: right; padding: 3px 0" type="text">导出JSON</el-button>
      </div>
      <div v-for="(item, k) in tableData" :key="k" class=" card_item">
        <div>{{ item.name }}</div>
        <div>
          <el-button type="primary" size="mini" circle icon="el-icon-top" @click="handleClickUp(item, k)" v-if="k != 0">
          </el-button>
          <el-button type="primary" size="mini" circle icon="el-icon-bottom" @click="handleClickDown(item, k)"
            v-if="k != tableData.length - 1"></el-button>
        </div>
      </div>
    </el-card> -->
    <div>
      <div class="flex">
        <el-button size="mini" type="primary" @click="handleCreateActCode">新增动作编码</el-button>
        <el-button size="mini" type="primary" @click="handleCreateCondition">新增组合</el-button>
        <el-button size="mini" type="primary" @click="handleExport">导出json</el-button>
        <importJson :store="6" @handleImport="handleImport"></importJson>
      </div>
      <el-table :data="tableData" border :row-key="getRowKey" align="left" style="width: 800px;margin-right:20px"
        height="600">
        <el-table-column label="动作编码" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.ID" size="mini" placeholder="请选择">
              <el-option :disabled="tableData.some(r=>{return r.ID==item.id})" v-for="item in enAutoActCode"
                :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="组合动作名称" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" size="mini" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="动作类型" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.Type" size="mini" placeholder="请选择">
              <el-option v-for="item in enCombinedControlType" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="主动作码" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.MainActCode" size="mini" placeholder="请选择">
              <el-option v-for="item in enActionCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="序列参数组" width="180">
          <template slot-scope="scope">
            <el-select filterable allow-create default-first-option size="mini" v-model="scope.row.ParaIDs" multiple
              placeholder="请选择">
              <el-option v-for="item in parasIDsCode" :key="item.value" :label=" item.value +' '+item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="支持类型" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.shieldTypeOpt" size="mini" multiple="" placeholder="请选择">
              <el-option v-for="(item) in enShieldType" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button @click="handleUpdata(scope.row)" type="text" size="small">更新</el-button>
            <el-button @click="handleSetting(scope.row)" type="text" size="small">配置动作</el-button>
            <el-button @click="handleDelete(scope.row,scope.$index)" type="text" size="small">删除</el-button>
            <el-button @click="handleCollection(scope.row)" type="text" size="small">收藏</el-button>
            <el-button @click="handleExportCfgActionElment(scope.row,scope.$index)" type="text" size="small">
              导出CfgActionElment</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <defineTools ref="tools" @handlePushToolToTable="handlePushToolToTable"></defineTools>

  </div>
</template>

<script>
  // import vuedraggable from 'vuedraggable'
  import Sortable from 'sortablejs';
  import enAutoActCode from './data/enAutoActCode';
  import enCombinedControlType from './data/enCombinedControlType';
  import enActionCode from './data/enActionCode';

  import enParaID from './data/enParaID';

  import enShieldType from './data/enShieldType';

  import InDB from './utils/initDB.js'

  import exportJson from "./utils/exportJson.js"

  import defineTools from "./components/defineTools.vue"

  import parasIDsCode from "./data/paraDataCode.js"

  import importJson from "./components/importJson.vue"

  export default {
    components: {
      defineTools,
      importJson
      // vuedraggable
    },
    data() {
      return {
        parasIDsCode: parasIDsCode,
        enAutoActCode: [],
        enActionCode: enActionCode,
        enCombinedControlType: enCombinedControlType,
        enParaID: enParaID,
        enShieldType: enShieldType,
        tableData: []
      };
    },

    methods: {
      handleImport(r) {
        this.tableData = r
      },
      handleCreateCondition() {
        this.tableData.push({})
      },
      handleCreateActCode() {
        this.$prompt('请输入含义', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({
          value
        }) => {
          InDB.AutoActCode.put({
            name: value
          }).then(res => {
            this.$message({
              type: 'success',
              message: "新增成功"
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handleCollection(r) {
        this.$refs.tools.updateTools(r)
      },
      handleExportCfgActionElment(r) {},
      handleExport() {
        let arr = this.tableData.map((item, i) => {
          item.ID = i
          Name: item.name,
            item.CfgActionElment = []
          return item
        })
        let promiseList = []
        for (let i = 0; i < arr.length; i++) {
          promiseList.push(InDB.CfgActionElment.get(arr[i].element_id).then(res => {
            arr[i].CfgActionElment = res.data || []
          }))

        }
        Promise.all(promiseList).then(res => {
          exportJson(arr, '10_CombineControl')
        })
      },
      handleSetting(r) {
        this.$router.push({
          path: "/CfgActionElment",
          query: {
            id: r.id
          }
        })
      },
      handleDelete(r, i) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            InDB.CfgCombineControlDefine.delete(r.id).then(() => {
              this.tableData.splice(i, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handleUpdata(r) {
        if (!r.ID || !r.name || (!r.Type && r.Type != 0) || !r.MainActCode || !r.ParaIDs || !r.shieldTypeOpt) {
          console.log(11);
          this.$message({
            type: 'info',
            message: '请检查内容是否有为填选!'
          });
          return
        }
        if (!r.ParaIDs.length || !r.shieldTypeOpt.length) {
          console.log(22);
          this.$message({
            type: 'info',
            message: '请检查内容是否有为填选!'
          });
          return
        }
        InDB.CfgCombineControlDefine.put({
          ...r
        }).then(() => {
          this.$message({
            type: 'success',
            message: '更新成功!'
          });
        })
      },
      handlePushToolToTable(r) {
        this.tableData = r
      },
      handleClickUp(r, k) {
        if (k == 0) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k - 1, 1, this.tableData[k])[0];
      },
      handleClickDown(r, k) {
        if (k == this.tableData.length - 1) {
          return;
        }
        this.tableData[k] = this.tableData.splice(k + 1, 1, this.tableData[k])[0];
        console.log(r);
      },
      getRowKey(row) {
        return row.id;
      },
    },
    updated() {},
    mounted() {},
    created() {
      InDB.AutoActCode.all().then(res1 => {
        this.enAutoActCode = res1
        InDB.CfgCombineControlDefine.all().then(res => {
          this.tableData = res
        })
      })

    }
  };
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .flex_center {
    align-items: center;
  }

  .wrapper {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
  }
</style>
